<template>
  <div class="header">
    <div class="top">
      <div class="left">
        <svg-icon @click="changeIsCollapse" ref="left" icon-class="icon-zhedie" className="icon-header-left"></svg-icon>
        <p>{{leftTitle}}</p>
      </div>
      <el-dropdown @command="onClick"  class="right" size="medium">
        <div class="el-dropdown-link">
          <div class="imgBox">
            <img src="@/assets/images/man.png" alt="">
          </div>
          <div class="myId">
            <span>{{userInformation.user.username}}</span>
          </div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">修改密码</el-dropdown-item>
          <el-dropdown-item command="2">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="bottom">
      <el-tabs closable v-model="labelIndex"  @tab-remove="removeTab" @tab-click="handleClick">
        <!--closable
        这是一个布尔属性（尽管在HTML中通常以属性的形式出现，
        但在Vue中通常通过绑定来处理），
        用于指示标签页是否可以被关闭。当closable被设置为true时，
        每个标签页旁边都会显示一个关闭按钮（通常是一个小叉号），
        用户可以通过点击这个按钮来关闭对应的标签页。-->
        <el-tab-pane
            v-for="item in menuArr"
            :key="item.name"
            :label="item.title"
            :name="item.name"
        >
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>

      <el-dropdown size="medium">
        <i class="el-icon-arrow-down el-icon--right"></i><!--下箭头-->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>关闭当前标签页</el-dropdown-item>
          <el-dropdown-item>关闭其他标签页</el-dropdown-item>
          <el-dropdown-item>关闭全部标签页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'head-view',
  props: {},
  components: {},
  data: function () {
    return {
      activeName: 'first',
      num: undefined,
      userInformation:{},
      //当前激活的标签页的名称。
      // editableTabsValue: '0',
      //用于生成新标签页名称的辅助变量，尽管在这个例子中，
      // 它实际上并没有被直接使用来生成名称（而是直接使用了tabIndex + 1的字符串形式）。
      tabIndex: 2,
      //一个包含所有标签页信息的数组，每个元素都是一个对象，
      // 包含title（标签页标题）、name（标签页名称，用于唯一标识）和content（标签页内容）。
      editableTabs: [
        {
          title: '主页',
          name: '0',
          content: '这是主页内容'
        }, {
          title: '体检',
          name: '1',
          content: '这是体检内容'
        }, {
          title: '门诊',
          name: '2',
          content: '这是门诊内容'
        }, {
          title: '随访',
          name: '3',
          content: '这是随访内容'
        }, {
          title: '住院',
          name: '4',
          content: '这是住院内容'
        }

      ],

    }
  },
  computed: {
    //映射
    ...mapState('headerRecord',['leftTitle',]),//子模块
    ...mapState(['menuArr','labelIndex']),


  },
  created() {
    this.userInformation=JSON.parse(sessionStorage.getItem('userInfo'));

  },
  beforeUpdate() {
  },

  methods: {

    onClick(command){
      if(command === '1'){
        console.log("修改密码")
      }
      if(command === '2'){
        console.log("退出")
      }
    },
    handleClick(tab) {
      this.$store.commit('changeTabIndex',tab.index)


    },
    changeIsCollapse() {
      this.$store.commit('changeIsCollapse')
      // 查找所有类名为 '.svg-icon.icon-aside-menu' 的元素
    },


    // addTab(targetName) {
    //   let newTabName = ++this.tabIndex + '';
    //   this.editableTabs.push({
    //     title: 'New Tab',
    //     name: newTabName,
    //     content: 'New Tab content'
    //   });
    //   this.editableTabsValue = newTabName;
    // },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }


  }
}
</script>

<style scoped lang="less">


.header {
  user-select: none;

  .top {
    height: 50px;
    display: flex;
    line-height: 50px;

    .left {
      display: flex;
      align-items: center;
      p{
        font-size: 15px;

      }

    }

    .el-dropdown.right {
      position: absolute;
      right: 30px;

      .myId {
        span {
          //仅仅对文字生效，而非包裹文字的大盒子
          cursor: pointer;
          transition: color 0.5s ease;
          color: rgba(0, 0, 0, .5);

          &:hover {
            color: rgba(0, 0, 0, 1);
          }
        }
      }

      //消除框架自带的 cursor: pointer;效果
      .el-dropdown-link {
        display: flex;
        align-items: center;
        cursor: auto;

        .imgBox {
          width: 60px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          right: 0;

          img {
            z-index: 3;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.6s;
            transform-origin: center; /* 确保缩放和移动都围绕中心进行 */

            &:hover {
              transform: scale(1.4) translateX(-6px) translateY(10px); /* 使用 scale 代替改变 width 和 height */
            }
          }
        }

      }
    }
  }

  .bottom {
    height: 40px;
    background-color: #fff;
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;

    //去除下面那条线
    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs {
      margin-left: 20px;
    }


    ::v-deep .el-tabs__item {

      transition: color 0.5s ease;
      //点击的时候
      //谁被点击，谁添加is-active这个类名
      //&.is-active{
      //  color: red;
      //}
      //hover的时候
      //&.el-tabs__item:hover {
      //
      //}
    }

    .el-icon-arrow-down.el-icon--right {
      background-color: rgba(0, 0, 0, .1);

      width: 40px;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.5s ease;

      &:hover {
        background-color: rgba(0, 0, 0, .2);
      }
    }

  }


}

//
//.el-dropdown-link {
//  cursor: pointer;
//  transition:color 0.5s ease;
//  &:hover{
//    color:rgba(0,0,255,.5);
//  }
//}
//
//.el-icon-arrow-down {
//  font-size: 12px;
//}
//
//.demonstration {
//  display: block;
//  color: #8492a6;
//  font-size: 14px;
//  margin-bottom: 20px;
//}
</style>

